<template>
  <el-container class="container">
      <el-aside :width="isCollapse?'64px':'200px'">
        <aside-menu></aside-menu>
      </el-aside>
      <el-container>
        <el-header>
          <header-view></header-view>
        </el-header>
        <el-main>
          <!-- 二级路由出口 -->
          <router-view></router-view>
        </el-main>
        <el-footer>脚步</el-footer>
      </el-container>
  </el-container>
</template>
<script>
import AsideMenu from './AsideMenu.vue'
import HeaderView from './HeaderView.vue'
import {createNamespacedHelpers} from 'vuex'
const {mapState:mapMenuState}=createNamespacedHelpers('menus')
export default {
  components:{
    HeaderView,AsideMenu
  },
  computed:{
    ...mapMenuState(['isCollapse'])
  }
 
}
</script>

<style lang="scss" scoped>
  .container{
    width: 100vw;
    height: 100vh;
    .el-aside{
      background-color: #304156;
    }
    .el-header{
      height: 50px;
    }
    .el-main{
      background: #f5f5f5;
    }
  }

</style>